import React, { Component } from 'react'

export default class App extends Component {
    myref = React.createRef()
    state = {
        list: ['aa','bb','cc']
    }
    render() {
        return (
            <div>
                <input ref={this.myref} />
                <button onClick={this.handlerClick}>add</button>
                <ul>
                    {
                        this.state.list.map((item,index) => 
                        <li key={index}>
                            {item}
                            <button onClick={ ()=>{
                                this.handlerDelClick(index)
                            } }>delet</button>
                        </li>)
                    }
                </ul>
                
                {
                    this.state.list.length === 0?<p>暂无代办事项</p>:null
                }
            </div>
        )
    }
    handlerClick = () => {
        let newList = [...this.state.list]
        newList.push(this.myref.current.value)
        this.myref.current.value = ''
        console.log(this.state.list);
        this.setState({
            list: newList
        })
    }
    handlerDelClick = (index) => {
        console.log('del',index);
        let newList = [...this.state.list]
        
        newList.splice(index,1)

        this.setState({
            list: newList
        })
    }
}

